<span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="{{ prefixCls }}-picker {{ size ? prefixCls + '-picker-' + size : '' }} {{ className }}" [ngStyle]="style" tabindex="0">
  <!-- Content of single picker -->
  <ng-container *ngIf="!isRange">
    <input
      #pickerInput
      class="{{ prefixCls }}-picker-input ant-input"
      [class.ant-input-lg]="size === 'large'"
      [class.ant-input-sm]="size === 'small'"
      [class.ant-input-disabled]="disabled"
      (click)="onClickInputBox()"

      [disabled]="disabled"
      readonly
      value="{{ getReadableValue() }}"
      placeholder="{{ getPlaceholder() }}"
    />
    <ng-container *ngTemplateOutlet="tplRightRest"></ng-container>
  </ng-container>

  <!-- Content of range picker -->
  <ng-container *ngIf="isRange">
    <span
      #pickerInput
      class="{{ prefixCls }}-picker-input ant-input"
      [class.ant-input-lg]="size === 'large'"
      [class.ant-input-sm]="size === 'small'"
      [class.ant-input-disabled]="disabled"
      (click)="onClickInputBox()"
    >
      <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'left' }"></ng-container>
      <span class="{{ prefixCls }}-range-picker-separator"> ~ </span>
      <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'right' }"></ng-container>
      <ng-container *ngTemplateOutlet="tplRightRest"></ng-container>
    </span>
  </ng-container>
</span>

<!-- Input for Range ONLY -->
<ng-template #tplRangeInput let-partType="partType">
  <input
    class="{{ prefixCls }}-range-picker-input"
    [disabled]="disabled"
    readonly
    value="{{ getReadableValue(partType) }}"
    placeholder="{{ getPlaceholder(partType) }}"
  />
</ng-template>

<!-- Right operator icons -->
<ng-template #tplRightRest>
  <i
    *ngIf="!disabled && !isEmptyValue(value) && allowClear"
    class="anticon anticon-cross-circle {{ prefixCls }}-picker-clear"
    (click)="onClickClear($event)"
  ></i>
  <span class="{{ prefixCls }}-picker-icon"></span>
</ng-template>

<!-- Overlay -->
<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="origin"
  [cdkConnectedOverlayOpen]="realOpenState"
  [cdkConnectedOverlayHasBackdrop]="!isOpenHandledByUser()"
  [cdkConnectedOverlayPositions]="overlayPositions"
  (positionChange)="onPositionChange($event)"
  (backdropClick)="onClickBackdrop()"
  (detach)="onOverlayDetach()"
>
  <div
    [@dropDownAnimation]="dropdownAnimation"
    (@dropDownAnimation.start)="animationStart()"
    (@dropDownAnimation.done)="animationDone()"
    style="position: relative;"
    [style.left]="currentPositionX === 'start' ? '-2px' : '2px'"
    [style.top]="currentPositionY === 'top' ? '-2px' : '2px'"
  > <!-- Compatible for overlay that not support offset dynamically and immediately -->
    <ng-content></ng-content>
  </div>
</ng-template>